<template>
  <RadioGroup v-model:value="value" @change="onChange">
    <Space direction="vertical">
      <Radio :value="1" :class="Styles.radioWrap">每一秒钟</Radio>
      <Radio :value="2" :class="Styles.radioWrap">
        <Space align="center">
          <span>从</span>
          <InputNumber
            v-model:value="s1"
            :min="0"
            :max="59"
            @change="onChange"
          />
          <span>秒开始 每隔</span>
          <InputNumber
            v-model:value="s2"
            :min="0"
            :max="59"
            @change="onChange"
          />
          <span>秒执行</span>
        </Space>
      </Radio>
      <Space align="center">
        <Radio :value="3" :class="Styles.radioWrap" />
        <span>具体秒数（可多选）</span>
        <Select
          v-model:value="s3"
          :class="Styles.selectWrap"
          :options="genOptions(60)"
          mode="multiple"
          :max-tag-count="3"
          @change="onChange"
          @focus="value = 3"
          allow-clear
        ></Select>
      </Space>

      <Radio :value="4" :class="Styles.radioWrap">
        <Space align="center">
          <span>周期从</span>
          <InputNumber
            v-model:value="s4"
            :min="0"
            :max="59"
            @change="onChange"
          />
          <span>到</span>
          <InputNumber
            v-model:value="s5"
            :min="0"
            :max="59"
            @change="onChange"
          />
          <span>秒</span>
        </Space>
      </Radio>
    </Space>
  </RadioGroup>
</template>

<script setup lang="tsx">
import { CSSProperties, computed, inject, ref } from 'vue';
import {
  ConfigProvider,
  InputNumber,
  Radio,
  RadioGroup,
  RadioGroupProps,
  Select,
  Space,
} from 'ant-design-vue';
import { emitKey } from './constant';
import Styles from './index.module.scss';
import { genOptions } from './utils';

const value = ref(1);
const s1 = ref(5);
const s2 = ref(3);
const s3 = ref([]);
const s4 = ref(1);
const s5 = ref(0);

const emit = inject(emitKey);

const data = computed(() => {
  if (value.value === 1) {
    return '*';
  } else if (value.value === 2) {
    return `${s1.value || 0}/${s2.value || 0}`;
  } else if (value.value === 3) {
    if (!s3.value.length) {
      return '*';
    }
    return s3.value.sort().join();
  } else if (value.value === 4) {
    return `${s4.value || 0}-${s5.value || 0}`;
  } else {
    return '*';
  }
});

const onChange = () => {
  emit?.({
    type: 's',
    value: data.value,
  });
};
</script>
